<template>
	<view class="head">
		<image src="../../static/bg.jpg" mode="widthFix" class="head-img"></image>
	</view>
	<view class="body">
		<view class="body-h">
			信息修改
		</view>
		<view class="body-form">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" class="form-body">
				<uni-forms-item name="name">
					<uni-easyinput prefixIcon="person" type="text" v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-from-item name="email">
					<uni-easyinput prefixIcon="email" type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</uni-from-item>
				<uni-forms-item name="password" style="margin-top: 20px;">
					<uni-easyinput prefixIcon="locked" v-model="formData.password" type="password"
						placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="password_c" class="pass-c">
					<uni-easyinput prefixIcon="locked" v-model="formData.password" type="password"
						placeholder="请确认密码" />
				</uni-forms-item>
			</uni-forms>
			<button @click="submit" class="submit">提交 </button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					email: '',
					password: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 2,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱地址',
						}]
					},

				}
			};
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.request({
						url: "http://localhost:8000/sign/update",
						method: 'POST',
						data: {
							token: uni.getStorageSync('token'),
							username: this.formData.username,
							password: this.formData.password,
							email: this.formData.email
						},
						//设置请求头
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
						},
						success: (res) => {
							if (res.data.code === 200) {
								uni.showToast({
									duration: 2000,
									title: "修改成功"
								})
							} else {
								uni.showToast({
									title: "登录失败"
								})
							}
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;
		height: 300px;

		.head-img {
			width: 100%;
			height: 100%;
		}
	}

	.body {
		width: 90%;
		height: auto;
		margin-left: calc(100vw * 0.05);
		position: absolute;
		top: 20%;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.8);

		.body-h {
			width: 100%;
			height: 80px;
			text-align: center;
			font-size: 18px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-weight: bold;
			color: #66b0fc;
		}

		.body-form {
			width: 92%;
			margin: 0 auto;
			margin-bottom: 20px;

			.submit {
				background-color: #66b0fc;
				color: white;
			}
		}
	}

	.pass-c {
		margin-top: 20px;
	}
</style>